@charset "utf-8";

@import "reset";
@import "common";

section{
    width: 900px;
    margin: 36px auto;
    border-top: 1px solid #6db6ff;
    .navigation{
        width: 100%;
        div{
            width: 66px;
            height: 24px;
            background: #6db6ff;
            text-align: center;
            p{
                color: white;
            }
        }
        .triangle{
            width: 0;
            height: 0;
            border-top:24px solid #6db6ff;
            border-right:12px solid white;
            border-bottom:10px solid white;
            border-left:0px solid #6db6ff;
        }
        table{
            tr{
                td{
                    a{
                        color: black; 
                    }
                }
            }
        }
    }
    .typauswahl{
        ul{
            width: 100%;
            height: 38px;
            line-height: 38px;
            margin-top: 20px;
            overflow: hidden;
            li{
                text-align: center;
                a{
                    display: inline-block;
                    width: 66px;
                    color: black;
                    overflow: hidden;
                    &:hover{
                        color: #6db6ff;
                    }
                }
            }
        }
    }
    .reveal{
        margin-top: 24px;
        .square{
            width: 74px;
            height: 36px;
            border-top: 1px solid #6db6ff;
            background: #fafafa;    
        }
        .triangle_bl{
            width: 0;
            height: 0;
            border-top: 0px solid white;
            border-right:16px solid white;
            border-bottom:36px solid #6db6ff;
            border-left: 0px solid #6db6ff;
        }
        .triangle_br{
            width: 0;
            height: 0;
            border-top: 0px solid white;
            border-right: 0px solid #6db6ff;
            border-bottom:36px solid #6db6ff;
            border-left: 16px solid white;
        }
        .square3{
            width: 900px;
            height: 36px;
            line-height: 36px;
            border-bottom: 1px solid #6db6ff;
            ul{
                li{
                    margin: 0 46px;
                    font-size: 16px;
                    font-weight: bold;
                }
            }
        }
    }
    .specify{
        width: 900px;
        background: #fafafa;
        border-bottom: 1px solid #6db6ff;
        ul{
            width: 750px;
            margin: 0 auto;
            li{
                p{
                    margin: 10px 36px;
                    font-size: 12px;
                }
            }
        }
    }
    .btn{
        margin-top: 8px;
        text-align: center;
        button{
            height: 18px;
            line-height: 18px;
            padding: 0 4px;
            border: 1px solid #c9c9c9;
            background: #e5e5e5; 
            &:hover{
                color: white;
                background: $index_color;
            }
        }
    }
}